<template>
  <div class="lang click">
    <!-- 按钮 -->
    <img
      style="width: 40px"
      class="click"
      src="../assets/img/lang.png"
      @click="langVisible = true"
    />

    <!-- 语言选择 -->
    <van-popup
      teleport="body"
      position="bottom"
      round
      v-model:show="langVisible"
    >
      <van-picker
        ref="elPicker"
        :title="$t('选择语言')"
        :cancel-button-text="$t('取消')"
        :confirm-button-text="$t('确定')"
        :columns="langs"
        :columns-field-names="{
          text: 'label',
          values: 'value',
        }"
        @cancel="langVisible = false"
        @confirm="setLang"
      ></van-picker>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 语言列表
const langs = ref([
  [
    { label: '中文', value: 'cn' },
    { label: '繁體', value: 'tw' },
    { label: '日本語', value: 'ja' },
    { label: '한국어', value: 'ko' },
    { label: 'English', value: 'en' },
  ],
])
const langVisible = ref(false)

// 设置语言
function setLang({ selectedValues }) {
  const lang = selectedValues[0]
  localStorage.setItem('lang', lang)
  location.reload()
}
</script>

<style lang="scss" scoped></style>
